/**
 * 思路：
 * slider作为手柄提供拖拽功能，作用区域为bar，拖拽过程中completed条必须实时更新(长度)，影响区域为slider至bar左端的距离。
 *
 * 自我执行封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
 * (function($){})(jQuery)这种写法好处：
 * a) 避免全局依赖。
 * b) 避免第三方破坏。
 * c) 兼容jQuery操作符'$'和'jQuery '
 * 等同于var jq = function($) {
 * // Code goes here
 * };
 * jq(jQuery);
 **/
(function ($) {
    $.fn.slider = {
        renderTo:$(document.body),//slider的载体、容器,可以是一个jQuery对象，也可以是选择器。
        enable:true,//slider插件是否可用。为true时可以拖拽,否则禁止拖拽。
        initPosition:'max',// slider的初始值,'max'或'min',即 slider的value值,1或者0。
        size:{  // slider的参数,包括2个值barWidth - bar的长度, sliderWidth -slider的长度。
            barWidth:200,
            sliderWidth:5
        },
        barCssName:'defaultbar',//bar的样式名称,便于自行扩展样式。
        completedCssName:'completed',//completed的样式名称。
        sliderCssName:'slider',//slider的样式名称。
        sliderHover:'sliderHover',//slider聚焦时的样式名称。
        onChanging:function() {},//slider被拖拽时触发的事件。
        onChanged:function(){}//slider拖拽结束时触发的事件。

    }
    $.extend({}, $.fn.slider,setting);

    ps.renderTo = (typeof ps.renderTo == 'string' ? $(ps.renderTo) : ps.renderTo);


    var sliderbar = $('<div><div>&nbsp;</div><div>&nbsp;</div></div>')

        .attr('class', ps.barCssName)

        .css('width', ps.size.barWidth)

        .appendTo(ps.renderTo);



    var completedbar = sliderbar.find('div:eq(0)')

        .attr('class', ps.completedCssName);



    var slider = sliderbar.find('div:eq(1)')

        .attr('class', ps.sliderCssName)

        .css('width', ps.size.sliderWidth);
    var bw = sliderbar.width(), sw = slider.width();

//make sure that the slider was displayed in the bar(make a limited)

    ps.limited = { min: 0, max: bw - sw };



    if (typeof window.$sliderProcess == 'undefined') {

        window.$sliderProcess = new Function('obj1', 'obj2', 'left',

            'obj1.css(\'left\',left);obj2.css(\'width\',left);');

    }

    $sliderProcess(slider, completedbar, eval('ps.limited.' + ps.initPosition));
    //drag and drop

    var slide = {

        drag: function(e) {

            var d = e.data;

            var l = Math.min(Math.max(e.pageX - d.pageX + d.left, ps.limited.min), ps.limited.max);



            $sliderProcess(slider, completedbar, l);

            //push two parameters: 1st:percentage, 2nd: event

            ps.onChanging(l / ps.limited.max, e);

        },

        drop: function(e) {

            slider.removeClass(ps.sliderHover);

            //push two parameters: 1st:percentage, 2nd: event

            ps.onChanged(parseInt(slider.css('left')) / ps.limited.max, e);



            $().unbind('mousemove', slide.drag).unbind('mouseup', slide.drop);

        }

    };



    if (ps.enable) {

        //bind events

        slider.bind('mousedown', function(e) {

            var d = {

                left: parseInt(slider.css('left')),

                pageX: e.pageX

            };

            $(this).addClass(ps.sliderHover);

            $().bind('mousemove', d, slide.drag).bind('mouseup', d, slide.drop);

        });

    }

})(jQuery);
